<template>
  <div class="landing-page min-h-screen">
    <!-- TargetCursor 效果 -->
    <TargetCursor targetSelector=".cursor-target" :spinDuration="2" :hideDefaultCursor="false" />

    <!-- Hyperspeed 背景 -->
    <div class="fixed inset-0 z-0">
      <Hyperspeed :effectOptions="{
        colors: {
          roadColor: 0x080808,
          islandColor: 0x0a0a0a,
          background: 0x000000,
          shoulderLines: 0x42d392,
          brokenLines: 0x42d392,
          leftCars: [0x42d392, 0x3ac47d, 0x92e3a9],
          rightCars: [0x647eff, 0x7b93ff, 0x92a3ff],
          sticks: 0x42d392
        },
        length: 400,
        roadWidth: 10,
        islandWidth: 2,
        fov: 90,
        fovSpeedUp: 150,
        speedUp: 2
      }" />
    </div>

    <!-- TopBar 导航栏 -->
    <TopBar @ctaClick="handleCTAClick" />

    <!-- Hero Section -->
    <section id="home" class="hero-section min-h-screen flex items-center justify-center px-8 pt-20 relative z-10">
      <div class="max-w-5xl mx-auto text-center">
        <!-- 主标题 -->
        <div class="mb-6">
          <span
            class="inline-block px-4 py-2 rounded-lg bg-gradient-to-r from-[#42d392]/20 to-[#647eff]/20 border border-[#42d392]/30 text-[#42d392] text-sm font-semibold mb-8">
            ✨ 欢迎来到我的世界
          </span>
        </div>

        <h1 class="hero-title text-7xl font-bold mb-6 leading-tight">
          <span class="bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent">
            净海奔流
          </span>
          <br>
          <span class="bg-gradient-to-r from-[#42d392] via-[#42d392] to-[#647eff] bg-clip-text text-transparent">
            不进则坠
          </span>
        </h1>

        <p class="text-xl text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
          太阳底下从无新鲜事，不过新雨落旧屋。
        </p>

        <!-- CTA 按钮组 -->
        <div class="flex items-center justify-center gap-4 mb-16">
          <button
            class="start-button cursor-target px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 relative overflow-hidden group">
            <!-- 背景光晕 -->
            <div class="absolute inset-0 bg-gradient-to-r from-[#42d392]/0 via-[#42d392]/20 to-[#647eff]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl"></div>
            
            <!-- 动画光线 -->
            <div class="absolute inset-0 overflow-hidden rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent opacity-0 group-hover:opacity-100 animate-shimmer"></div>
            </div>
            
            <!-- 脉冲光圈 -->
            <div class="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <div class="absolute inset-0 rounded-lg animate-pulse-ring"></div>
            </div>
            
            <span class="relative z-10 flex items-center gap-2">
              Start
              <svg class="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
              </svg>
            </span>
          </button>
        </div>

        <!-- 技术栈标签云 -->
        <div class="flex flex-wrap items-center justify-center gap-3 max-w-3xl mx-auto">
          <span v-for="tech in techStack" :key="tech"
            class="tech-badge px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-gray-300 text-sm hover:border-[#42d392]/50 hover:text-[#42d392] transition-all duration-300 cursor-default">
            {{ tech }}
          </span>
        </div>
      </div>
    </section>


    <!-- Footer -->
    <footer class="footer py-8 px-6 border-t border-white/10 relative z-10">
      <div class="max-w-6xl mx-auto text-center">
        <p class="text-gray-400 text-sm">
          © 2025 <span class="font-semibold">TqCoder</span>. All rights reserved.
        </p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import Hyperspeed from '@/vue-bits/Backgrounds/Hyperspeed/Hyperspeed.vue'
import TargetCursor from '@/vue-bits/Animations/TargetCursor/TargetCursor.vue'
import TopBar from '@/views/frontend/components/TopBar.vue'

const techStack = [
  'Springer', '工业党', 'CFer', 'AI', '青年黑格尔派',
  'fake前端爱好者', '蒟蒻', '安卓人', '灵学家'
]

const handleCTAClick = () => {
  // 滚动到项目区域
  const projectsSection = document.querySelector('#projects')
  if (projectsSection) {
    projectsSection.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>

<style scoped>
.landing-page {
  background: linear-gradient(to bottom right, #050505, #0a0a0a, #0d0d0d);
  position: relative;
}

.hero-title {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tech-badge {
  animation: fadeIn 0.5s ease-out backwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tech-badge:nth-child(1) {
  animation-delay: 0.1s;
}

.tech-badge:nth-child(2) {
  animation-delay: 0.15s;
}

.tech-badge:nth-child(3) {
  animation-delay: 0.2s;
}

.tech-badge:nth-child(4) {
  animation-delay: 0.25s;
}

.tech-badge:nth-child(5) {
  animation-delay: 0.3s;
}

.tech-badge:nth-child(6) {
  animation-delay: 0.35s;
}

.tech-badge:nth-child(7) {
  animation-delay: 0.4s;
}

.tech-badge:nth-child(8) {
  animation-delay: 0.45s;
}

.tech-badge:nth-child(9) {
  animation-delay: 0.5s;
}

/* Start 按钮样式 */
.start-button {
  color: #ffffff;
  border: 1.5px solid rgba(66, 211, 146, 0.4);
  background: linear-gradient(135deg, 
    rgba(15, 35, 25, 0.6), 
    rgba(15, 25, 35, 0.4)
  );
  backdrop-filter: blur(12px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(66, 211, 146, 0.2),
    0 0 30px rgba(66, 211, 146, 0.15);
  position: relative;
  animation: buttonFloat 3s ease-in-out infinite;
}

.start-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(66, 211, 146, 0.3), 
    rgba(100, 126, 255, 0.2)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0.5rem;
}

.start-button:hover::before {
  opacity: 1;
}

.start-button:hover {
  border-color: rgba(66, 211, 146, 0.8);
  transform: translateY(-4px);
  box-shadow: 
    0 16px 48px rgba(66, 211, 146, 0.35),
    inset 0 1px 0 rgba(66, 211, 146, 0.4),
    0 0 50px rgba(66, 211, 146, 0.3),
    0 0 30px rgba(100, 126, 255, 0.25);
  animation: none;
}

.start-button:active {
  transform: translateY(-2px);
}

.start-button:active::before {
  opacity: 1;
  background: linear-gradient(135deg, 
    rgba(66, 211, 146, 0.4), 
    rgba(100, 126, 255, 0.3)
  );
}

/* 浮动动画 */
@keyframes buttonFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* 闪光动画 */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

/* 脉冲光圈动画 */
@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(66, 211, 146, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(66, 211, 146, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(66, 211, 146, 0);
  }
}

.animate-pulse-ring {
  animation: pulseRing 2s infinite;
}
</style>
